import { Button, message } from 'antd';
import ProForm, {
  ModalForm,
  ProFormText,
  ProFormSwitch,
  ProFormSelect,
} from '@ant-design/pro-form';
import { request } from 'umi';
import { PlusOutlined } from '@ant-design/icons';
import { api } from '@/global';

type deptTyp = {
  id: string;
  deptName: string;
};
type conditionType = {
  id: string;
  statu: string;
};

type roleType = {
  id: string;
  roleName: string;
};

type professionalType = {
  id: string;
  professionalName: string;
};
const waitTime = (time: number = 100) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(true);
    }, time);
  });
};

export default (props: any) => {
  return (
    <ModalForm<{
      name: string;
      company: string;
    }>
      title="新增用户"
      trigger={
        <Button type="primary">
          <PlusOutlined />
          创建用户
        </Button>
      }
      autoFocusFirstInput
      modalProps={{
        destroyOnClose: true,
        onCancel: () => console.log('run'),
      }}
      onFinish={async (values) => {
        await waitTime(2000);

        await request(api.insertUserInfo, {
          method: 'POST',
          data: values,
        });

        props?.reloadPage();

        message.success('提交成功');
        return true;
      }}
    >
      <ProForm.Group>
        <ProFormText
          width="sm"
          name="name"
          label="请输入用户姓名"
          placeholder="请输入姓名"
          rules={[
            {
              required: true,
              message: '请输入姓名',
            },
          ]}
        />
        <ProFormText
          width="md"
          name="num"
          tooltip="如果无请空下"
          label="请输入用户学号"
          placeholder="请输入学号"
        />
      </ProForm.Group>
      <ProForm.Group>
        <ProFormSelect
          request={async () => [
            {
              value: 1,
              label: '男',
            },
            {
              value: 2,
              label: '女',
            },
          ]}
          width="xs"
          name="sex"
          label="选择用户性别"
          rules={[
            {
              required: true,
              message: '请输入性别',
            },
          ]}
        />
        <ProFormText
          width="sm"
          name="email"
          label="请输入用户邮箱号"
          placeholder="请输入邮箱号"
          rules={[
            {
              required: true,
              message: '请输入邮箱',
            },
            {
              pattern: /^([A-Za-z0-9_\-\.\u4e00-\u9fa5])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,8})$/,
              message: '请输入正确的邮箱号',
            },
          ]}
        />
        <ProFormSwitch name="notification" label="通知用户" tooltip="以邮件形式通知用户" />
      </ProForm.Group>
      <ProForm.Group>
        <ProFormText
          width="sm"
          name="phone"
          label="请输入用户手机号"
          placeholder="请输入手机号"
          rules={[
            {
              required: true,
              message: '请输入用户手机号',
            },
            {
              pattern: /^(\+?0?86\-?)?1[3-9]\d{9}$/,
              message: '请输入正确的手机号',
            },
          ]}
        />

        <ProFormSelect
          width="xs"
          request={async () => {
            const conditionData = await request(api.getRoleList, {});

            const list: any[] = [];
            conditionData.data.map((item: roleType) => {
              list.push({
                label: item.roleName,
                value: item.id,
              });
            });

            return list;
          }}
          name="role"
          label="为用户选择角色"
          rules={[
            {
              required: true,
              message: '请为用户选择角色',
            },
          ]}
        />
      </ProForm.Group>
      <ProForm.Group>
        <ProFormSelect
          request={async () => {
            const deptData = await request(api.getAllDept, {});
            const list: any[] = [];

            deptData.data.map((item: deptTyp) => {
              list.push({
                label: item.deptName,
                value: item.id,
              });
            });

            return list;
          }}
          width="xs"
          name="dept"
          label="选择用户系部"
          rules={[
            {
              required: true,
              message: '请选择系部',
            },
          ]}
        />
        <ProFormSelect
          request={async () => {
            const deptData = await request(api.getSimpleProfessional, {});
            const list: any[] = [];

            deptData.data.map((item: professionalType) => {
              list.push({
                label: item.professionalName,
                value: item.id,
              });
            });

            return list;
          }}
          width="sm"
          name="professional"
          label="选择用户所在专业"
          tooltip="若无专业可以不填"
        />

        <ProFormSelect
          width="xs"
          request={async () => {
            const conditionData = await request(api.getAllCondition, {});

            const list: any[] = [];
            conditionData.data.map((item: conditionType) => {
              list.push({
                label: item.statu,
                value: item.id,
              });
            });

            return list;
          }}
          name="statu"
          label="为用户选择状态"
          rules={[
            {
              required: true,
              message: '请为用户选择状态',
            },
          ]}
        />
      </ProForm.Group>
    </ModalForm>
  );
};
